import { observer } from 'mobx-react-lite';
import { Dialog, ModifyOutlined, RightOutlined, Toast } from 'esy-ui';
import { useCallback, useState } from 'react';
import { Header, Img } from '@/components';
import { list } from './const';
import { useFormatText, useNavigation } from '@/hooks';
import { useUserInfoStore } from '@/mobx';
import QuickNav from '../quick-nav';

const fundDialogBtns = [
  {
    tKey: 'text_75',
    link: '',
  },
  {
    tKey: 'text_122',
    link: '/bet/bind-mobile',
  },
  {
    tKey: 'text_119',
    link: '/bet/bind-email',
  },
];

const info = [
  {
    tKey: 'text_75',
    link: '',
  },
  {
    tKey: 'text_38',
    link: '/bet/info',
  },
];

function AccountSafety() {
  const { text } = useFormatText();
  const { userInfo } = useUserInfoStore();
  const navigation = useNavigation();
  const [open, setOpen] = useState('');

  // 关闭资金密码弹窗
  const onClose = useCallback(() => {
    setOpen('');
  }, []);

  // 二级页面跳转
  const toPage = (url) => {
    if (url === '/bet/bind-mobile') {
      // 已经绑定过手机号，需要联系客服更改
      if (userInfo?.Mobile) {
        Toast.show(text('text_116'));
        return;
      }
    } else if (url === '/bet/bind-email') {
      // 已经绑定过邮箱，需要联系客服更改
      if (userInfo?.Email) {
        Toast.show(text('text_116'));
        return;
      }
    } else if (url === '/bet/update-fund-pwd') {
      // 修改资金密码，需先绑定手机号或者邮箱
      if (!userInfo?.Mobile && !userInfo?.Email) {
        setOpen('fund-pwd');
        return;
      }
    } else if (url === '/band-list') {
      // 绑定资金账户，需要真实姓名
      if (!userInfo?.Name) {
        setOpen('band-list');
        return;
      }
      return;
    }
    navigation(url);
  };

  // 资金密码弹窗按钮处理
  const onFundDialogBtn = (e) => {
    const linkUrl = e?.target?.getAttribute('data-link');
    if (linkUrl) {
      navigation(linkUrl);
    } else {
      onClose();
    }
  };

  const isBand = open === 'band-list';

  return (
    <div className='bg-body w-full h-full flex flex-col'>
      <Header title='text_109' isGoHome />
      <QuickNav />
      <div className='my-4 mx-2.5' />
      <div className='shadow rounded mx-2.5'>
        {list.map((it, i) => (
          <div
            key={0 || `${it.key}-${i}`}
            className='bg-white flex items-center justify-between border-b border-solid border-color-19 last:border-b-0 py-3 px-1 cursor-pointer hover:bg-color-19'
            onClick={() => {
              toPage(it.key);
            }}
          >
            <div className='flex items-center text-xs '>
              <Img boxClassName='w-8 ml-1' src={it.icon} />
              <div className='mx-2.5 flex-1 overflow-hidden'>
                <div className='flex items-center min-h-6'>
                  <div className='truncate font-bold'>{text(it.title)}</div>
                  {/* <SuccessCircleFilled className='text-sm text-success ml-2' /> */}
                  <ModifyOutlined className='text-sm text-desc mx-2' />
                </div>
                <div className='text-desc truncate'>{text(it.desc)}</div>
              </div>
            </div>
            <RightOutlined className='text-base text-desc p-2' />
          </div>
        ))}
      </div>
      <Dialog open={Boolean(open)} onClose={onClose} direction='center'>
        <div className='bg-white px-3 py-2 mx-4 rounded-lg'>
          <div className='p-3 text-sm font-bold text-center'>{text(isBand ? 'text_144' : 'text_145')}</div>
          <div className='p-3 text-xs text-desc text-center min-h-16'>{text(isBand ? 'text_217' : 'text_131')}</div>
          <div className='flex items-center justify-between gap-2 border border-solid border-color-19 rounded'>
            {(isBand ? info : fundDialogBtns).map((it) => (
              <div
                key={it.tKey}
                className='flex-1 text-center py-2 text-sm text-color-21 first:text-desc border-r border-solid border-color-19 underline first:no-underline last:border-r-0'
                data-link={it.link}
                onClick={onFundDialogBtn}
              >
                {text(it.tKey)}
              </div>
            ))}
          </div>
        </div>
      </Dialog>
    </div>
  );
}

export default observer(AccountSafety);
